<template>
  <a-modal
          :visible="visible"
          :width="500"
          :height="500"
          :bodyStyle="{overflow: 'auto'}"
          title="绑定微信"
          @cancel="() => { this.$emit('reload');$emit('cancel') }"
  >
    <div style="padding: 20px;">
      <img style="width: 400px" :src="'data:image/jpeg;base64,' +qrcode.img" alt="">
    </div>
    <div slot="footer" style="text-align: center">
      <a-button @click="() => { this.$emit('reload');$emit('cancel') }" type="primary">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
  import {DateToString} from '@/utils/common'
  import {mapState} from 'vuex'

  export default {
    props: ['visible'],
    data() {
      return {
        form: this.$form.createForm(this),
        qrcode: {img: ''}
      }
    },
    computed: {
      ...mapState({}),
    },
    filters: {},
    created() {
    },
    watch: {
      visible(val) {
        if (val) {
          this.getQrcode();
        }
      }
    },
    methods: {
      getQrcode() {
        this.$api.user['bindQrcode']().then(res => {
          this.qrcode = {...res.data}
        })
      },
      onSendCode(type) {
        this.form.validateFields(['to'], (err, values) => {
          if (err) {
            return
          }
          const _values = Object.assign({type: 'wechat'}, values);
          this.$api.user['sendBindCode'](_values).then(res => {
            if (res.status == 1) {
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      },
      submit() {
        this.form.validateFields((err, values) => {
          if (err) {
            return
          }
          const _values = Object.assign({type: 'wechat'}, values);
          this.$api.student['bindConfirm'](_values).then(res => {
            if (res.status == 1) {
              this.$message.success(res.msg)
              this.$emit('cancel')
              this.$emit('reload')
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style>

</style>
